<template>
    <!-- 安全检查详情 -->
    <div class="recordDetail">
        <div class="top">
            <div class="topLeft">
                <el-button type="primary" plain @click="goBack">返回</el-button>
            </div>
            <div class="topRight">
                <el-button type="primary" @click="handleSubmit" v-if="canHandle">已处理并提交</el-button>
                <el-button type="primary" plain @click="goBack">取消</el-button>
            </div>
        </div>
        <div class="scrollBox">
            <div class="content">
                <div class="title">{{ problemType==="safety"?"安全":"质量" }}问题详情</div>
                <div class="tableWrap">
                    <table border="1">
                        <tr>
                            <td colspan="4">
                                <div class="tableTitle">
                                    <div class="left">问题信息</div>
                                    <div class="right">
                                        <div class="tag" v-if="detailMsg.urgency===1">一般</div>
                                        <div class="tag urgency" v-if="detailMsg.urgency===2">紧急</div>
                                        <div class="tag overtime" v-if="detailMsg.overdue===1">超时</div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="label">检查人</td>
                            <td class="value">{{ detailMsg.userName }}</td>
                            <td class="label">检查日期</td>
                            <td class="value">{{ detailMsg.checkTime }}</td>
                        </tr>
                        <tr>
                            <td class="label">问题类别</td>
                            <td class="value">{{ detailMsg.issueTypeName }}</td>
                            <td class="label">检查部位</td>
                            <td class="value">{{ detailMsg.partName }}</td>
                        </tr>
                        <tr>
                            <td class="label">检查地点</td>
                            <td class="value" colspan="3">{{ detailMsg.address }}</td>
                        </tr>
                        <tr>
                            <td class="label">问题明细</td>
                            <td class="value" colspan="3">{{ detailMsg.issueContent }}</td>
                        </tr>
                        <tr>
                            <td class="label">检查说明</td>
                            <td class="value" colspan="3">{{ detailMsg.checkDesc }}</td>
                        </tr>
                        <tr>
                            <td class="label">现场图片</td>
                            <td class="imgList" colspan="3">
                                <el-image
                                    :src="item"
                                    v-for="(item, i) in detailMsg.imgUrlList"
                                    :key="i"
                                    :preview-src-list="detailMsg.imgUrlList">
                                </el-image>
                            </td>
                        </tr>
                        <tr>
                            <td class="stepsBox" colspan="4">
                                <ul class="steps">
                                    <li class="step" :class="{current: item.type==operationType, pass: item.type<operationType}" v-for="item in steps" :key="item.type">
                                        <!-- 要求 -->
                                        <div class="stepTitle">{{ item.stepName }}</div>
                                        <div class="stepContent">
                                            <div class="dataItem">
                                                <div class="itemBox longText">
                                                    <div class="itemLeft">{{ item.stepType }}人：</div>
                                                    <div class="itemRight">{{ item.userNames.join(',') }}</div>
                                                </div>
                                                <div class="itemBox" v-if="item.type===2">
                                                    <div class="itemLeft">整改期限：</div>
                                                    <div class="itemRight">{{ detailMsg.rectifyTime }}</div>
                                                </div>
                                            </div>
                                            <div class="dataItem" v-if="item.type===2">
                                                <div class="itemBox longText">
                                                    <div class="itemLeft">整改要求：</div>
                                                    <div class="itemRight">{{ detailMsg.rectifyRequire }}</div>
                                                </div>
                                            </div>
                                            <!-- 结果 -->
                                            <div class="resultBox" v-if="item.result">
                                                <div class="dataItem">
                                                    <div class="itemBox">
                                                        <div class="itemLeft">{{ item.stepType }}时间：</div>
                                                        <div class="itemRight">{{ item.result.opTime }}</div>
                                                    </div>
                                                </div>
                                                <div class="dataItem">
                                                    <div class="itemBox longText">
                                                        <div class="itemLeft ">{{ item.stepType }}说明：</div>
                                                        <div class="itemRight">{{ item.result.opDesc }}</div>
                                                    </div>
                                                </div>
                                                <div class="dataItem">
                                                    <div class="itemBox longText">
                                                        <div class="itemLeft">{{ item.stepType }}图片：</div>
                                                        <div class="itemRight">
                                                            <el-image
                                                                :src="img"
                                                                v-for="(img, index) in item.result.imgUrlList"
                                                                :key="index"
                                                                :preview-src-list="item.result.imgUrlList">
                                                            </el-image>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <!-- 复查信息 -->
                                    <li class="step" v-if="false">
                                        <!-- 要求 -->
                                        <div class="stepTitle">复查信息</div>
                                        <div class="stepContent">
                                            <div class="dataItem">
                                                <div class="itemBox">
                                                    <div class="itemLeft">复查人：</div>
                                                    <div class="itemRight">张三</div>
                                                </div>
                                            </div>
                                            <!-- 复查结果 -->
                                            <div class="resultBox">
                                                <div class="dataItem">
                                                    <div class="itemBox">
                                                        <div class="itemLeft">复查时间：</div>
                                                        <div class="itemRight">2023-03-06 10:04:33</div>
                                                    </div>
                                                </div>
                                                <div class="dataItem">
                                                    <div class="itemBox longText">
                                                        <div class="itemLeft">复查说明：</div>
                                                        <div class="itemRight">喷浆不均匀，脱色、掉粉这些问题已整改完毕，请领导复查。</div>
                                                    </div>
                                                </div>
                                                <div class="dataItem">
                                                    <div class="itemBox">
                                                        <div class="itemLeft">复查图片：</div>
                                                        <div class="itemRight"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <!-- 核验信息 -->
                                    <li class="step" v-if="false">
                                        <div class="stepTitle">核验信息</div>
                                        <div class="stepContent">
                                            <div class="dataItem">
                                                <div class="itemBox">
                                                    <div class="itemLeft">核验人：</div>
                                                    <div class="itemRight">张三</div>
                                                </div>
                                            </div>
                                            <!-- 核验结果 -->
                                            <div class="resultBox">
                                                <div class="dataItem">
                                                    <div class="itemBox">
                                                        <div class="itemLeft">核验时间：</div>
                                                        <div class="itemRight">2023-03-06 10:04:33</div>
                                                    </div>
                                                </div>
                                                <div class="dataItem">
                                                    <div class="itemBox longText">
                                                        <div class="itemLeft">核验说明：</div>
                                                        <div class="itemRight">喷浆不均匀，脱色、掉粉这些问题已整改完毕，请领导复查。</div>
                                                    </div>
                                                </div>
                                                <div class="dataItem">
                                                    <div class="itemBox">
                                                        <div class="itemLeft">核验图片：</div>
                                                        <div class="itemRight"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <!-- 其他信息 -->
                                    <li class="step" v-if="false">
                                        <div class="stepTitle">其他信息</div>
                                        <div class="stepContent">
                                            <div class="dataItem">
                                                <div class="itemBox">
                                                    <div class="itemLeft">抄送人人：</div>
                                                    <div class="itemRight">张三</div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr v-if="canHandle">
                            <td class="formBox" colspan="4">
                                <div class="formTitle">{{operationTypeName}}结果</div>
                                <div class="formContent">
                                    <div class="formItem" v-if="operationType!=2">
                                        <div class="label">是否合格：</div>
                                        <el-radio v-model="opResult" :label="1">合格</el-radio>
                                        <el-radio v-model="opResult" :label="2">不合格</el-radio>
                                    </div>
                                    <div class="formItem">
                                        <div class="label">{{operationTypeName}}说明：</div>
                                        <el-input type="textarea" :rows="3" v-model="opDesc" placeholder="请输入"></el-input>
                                    </div>
                                    <div class="formItem">
                                        <div class="label">现场图片：</div>
                                        <div class="uploadBox">
                                            <el-upload
                                                ref="uploadImg"
                                                :headers="headers"
                                                :action="$axios.defaults.baseURL +'/ms/api/safety/check/uploadImg'"
                                                list-type="picture-card"
                                                accept="image/png, image/jpg, image/jpeg"
                                                :before-upload="beforeImgUpload"
                                                :on-success="logImgSuccess"
                                                name="file"
                                                :limit="10"
                                                :on-exceed="exceedImg"
                                                :on-remove="handleRemove"
                                            >
                                                <i slot="default" class="el-icon-plus"></i>
                                            </el-upload>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { safetyProblemReportDetails, safetyProblemReportLog } from "@/api/safety";
import { problemReportDetails, problemReportLog } from "@/api/quality";
export default {
    name: "recordDetail",
    data() {
        return {
            problemType: "safety",
            checkId: "",
            detailMsg: {},
            steps: [],
            // 问题状态
            state: null, // 10待整改 20待复查 30待核验 100合格 999不合格
            // 操作类型
            operationType: null, // 2待整改 3待复查 4待核验
            operationTypeName: "整改", // 整改 复查 核验
            // 能否处理
            canHandle: false,

            headers: {Authorization:localStorage.getItem('COOKIE')},
            opDesc: "", // 说明
            opResult: 1, // 是否合格 1合格 2不合格
            siteImgUrl: []
        }
    },
    created(){
        this.checkId = this.$route.query.checkId
        this.problemType = this.$route.query.problemType
        this.getProblemDetail()
    },
    methods: {
        // 获取问题详情
        getProblemDetail(){
            let params = {
                checkId: this.checkId
            }
            let ProblemReportDetailAPI
            if(this.problemType=="safety"){
                ProblemReportDetailAPI = safetyProblemReportDetails
            }else{
                ProblemReportDetailAPI = problemReportDetails
            }
            ProblemReportDetailAPI(params).then(res=>{
                if (res.code == 200) {
                    this.detailMsg = res.data

                    // 获取问题状态
                    this.state = res.data.state
                    if (this.state == 10 || this.state == 11 || this.state == 12) {
                        this.operationType = 2
                        this.operationTypeName = "整改"
                    }else if (this.state == 20) {
                        this.operationType = 3
                        this.operationTypeName = "复查"
                    }else if (this.state == 30) {
                        this.operationType = 4
                        this.operationTypeName = "核验"
                    }else{
                        this.operationType = 5
                        this.operationTypeName = "完成"
                    }

                    // 判断当前登录人能否处理
                    let userId = localStorage.getItem("userId");
                    this.canHandle = res.data.userList.some(element => element.type==this.operationType && userId==element.userId);

                    // 生成流程步骤
                    const steps = res.data.userList.filter(item => item.type != 1).reduce((acc, item) => {
                        // 查找是否已有该type的分组
                        let group = acc.find(g => g.type === item.type);
                        if (!group) {
                            // 创建新分组
                            group = { type: item.type, userNames: [] };
                            if(item.type===2){
                                group.stepName = "整改要求"
                                group.stepType = "整改"
                            }else if(item.type===3){
                                group.stepName = "复查信息"
                                group.stepType = "复查"
                            }else if(item.type===4){
                                group.stepName = "核验信息"
                                group.stepType = "核验"
                            }else if(item.type===5){
                                group.stepName = "其他信息"
                                group.stepType = "抄送"
                            }
                            acc.push(group);
                        }
                        // 添加用户数据
                        group.userNames.push(item.userName);
                        return acc;
                    }, [])

                    res.data.logList.forEach(element => {
                        let step = steps.find(g => g.type === element.opType);
                        if(step){
                            step.result = element
                        }
                    })
                    this.steps = steps
                }
            })
        },

        // 图片上传前
        beforeImgUpload(file) {
            let acceptFileType = ['jpg','png','jpeg']
            let type = file.name.split(".").slice(-1)[0].toLowerCase()
            const isLt2M = file.size / 1024 / 1024 < 2;
            if(!acceptFileType.includes(type)){
                this.$Message.error("请上传png，jpg，jpeg格式的文件！")
                return false
            }
            if (!isLt2M) {
                this.$Message.error("上传图片大小不能超过2MB!");
            }
            return isLt2M;
        },

        // 数量超出提示
        exceedImg(files, fileList) {
            if (this.siteImgUrl.length == 10) {
                this.$Message.warning("上传图片最多10张");
                return;
            }
        },

        // 删除图片
        handleRemove(file, fileList) {
            this.siteImgUrl = [];
            fileList.forEach(v => {
                this.siteImgUrl.push(v.response.data);
            });
        },

        // 图片上传成功
        logImgSuccess(res, file) {
            this.siteImgUrl.push(res.data);
        },

        // 提交处理表单
        handleSubmit(){
            if(!this.opDesc){
                this.$message.warning("请输入说明")
                return
            }
            if(this.siteImgUrl.length===0){
                this.$message.warning("请上传现场图片")
                return
            }
            let parmas = {
                checkId: this.checkId,
                opType: this.operationType,
                opDesc: this.opDesc,
                opResult: this.opResult,
                imgUrls: this.siteImgUrl
            }
            let ProblemReportDisposeAPI
            if(this.problemType=="safety"){
                ProblemReportDisposeAPI = safetyProblemReportLog
            }else{
                ProblemReportDisposeAPI = problemReportLog
            }
            ProblemReportDisposeAPI(parmas).then(res => {
                if (res.code == 200) {
                    this.$message.success("操作成功");
                    this.goBack()
                }
            })
        },

        // 返回
        goBack(){
            this.$router.go(-1)
        }
    },
}
</script>

<style scoped lang="less">
.recordDetail{
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    .top{
        height: 65px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        box-shadow: 1px 1px 5px 0px rgba(210, 210, 210, 0.35);
        .el-button--primary.is-plain{
            color: #557af2;
            border-color: #557af2;
            background-color: #ffffff;
            &:hover{
                color: #fff;
                background-color: #557af2;
            }
        }
        .el-button--primary{
            color: #fff;
            border-color: #557af2;
            background-color: #557af2;
        }
    }
    .scrollBox{
        height: calc(100% - 65px);
        overflow-y: auto;
    }
    .content{
        width: 1027px;
        padding: 100px 0 80px;
        margin: 30px auto;
        background-color: #ffffff;
        box-shadow: 1px 1px 8px 0px rgba(83, 83, 83, 0.28);
        .title{
            font-size: 24px;
            color: #333333;
            font-weight: 700;
            text-align: center;
        }
        .tableWrap{
            width: 805px;
            margin: 40px auto 0;
            table {
                width: 100%;
                border-collapse: collapse;
                border-color: #D4D6DB;
                tr{
                    td{
                        height: 45px;
                        padding: 0 10px;
                    }
                    .label{
                        width: 100px;
                        text-align: center;
                    }
                    .imgList{
                        padding: 10px 10px 0;
                        .el-image{
                            margin: 0 10px 10px 0;
                            width: 100px;
                            height: 100px;
                            border-radius: 10px;
                        }
                    }
                    .tableTitle{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .left{
                            font-size: 16px;
                            color: #333333;
                            font-weight: 700;
                        }
                        .right{
                            display: flex;
                            .tag{
                                margin-left: 5px;
                                width: 82px;
                                height: 34px;
                                border-radius: 3px;
                                color: #ffffff;
                                text-align: center;
                                line-height: 34px;
                                background-color: #66b1ff;
                            }
                            .urgency{
                                background-color: #ea6f6f;
                                box-shadow: 1px 1px 5px 0px rgba(245, 18, 71, 0.36);
                            }
                            .overtime{
                                background-color: #f51247;
                                box-shadow: 1px 1px 5px 0px rgba(245, 18, 71, 0.46);
                            }
                        }
                    }
                    .stepsBox{
                        padding: 20px 0;
                        .steps{
                            .step{
                                padding: 0 20px 40px 60px;
                                position: relative;
                                &::before{
                                    content: "";
                                    width: 24px;
                                    height: 24px;
                                    box-sizing: border-box;
                                    border: 3px solid #a6a6a6;
                                    border-radius: 50%;
                                    position: absolute;
                                    top: 0;
                                    left: 20px;
                                }
                                &::after{
                                    content: "";
                                    width: 2px;
                                    height: calc(100% - 24px);
                                    background-color: #a6a6a6;
                                    position: absolute;
                                    top: 24px;
                                    left: 31px;
                                }
                                &:last-of-type{
                                    &::after{
                                        display: none;
                                    }
                                }
                                .stepTitle{
                                    margin-bottom: 10px;
                                    font-size: 14px;
                                    color: #a4a4a4;
                                }
                                .stepContent{
                                    padding: 10px 20px;
                                    border-radius: 0 15px 15px 15px;
                                    background-color: #f5f3f3;
                                    .dataItem{
                                        display: flex;
                                        margin-bottom: 5px;
                                        .itemBox{
                                            flex: 1;
                                            font-size: 14px;
                                            color: #7a7b7c;
                                            display: flex;
                                            &:nth-child(2){
                                                margin-left: 20px;
                                            }
                                        }
                                        .longText{
                                            .itemLeft{
                                                width: 70px;
                                            }
                                            .itemRight{
                                                flex: 1;
                                                .el-image{
                                                    margin: 0 10px 10px 0;
                                                    width: 100px;
                                                    height: 100px;
                                                    border-radius: 10px;
                                                }
                                            }
                                        }
                                    }
                                    .resultBox{
                                        margin-top: 30px;
                                        padding-top: 30px;
                                        border-top: 1px solid #84d9c0;
                                    }
                                }
                            }
                            .pass{
                                &::before{
                                    border-color: #2cb88e;
                                }
                                &::after{
                                    background-color: #2cb88e;
                                }
                                .stepTitle{
                                    color: #2cb88e;
                                    font-weight: 700;
                                }
                                .stepContent{
                                    background-color: #eefbf7;
                                }
                            }
                            .current{
                                .stepTitle{
                                    color: #2cb88e;
                                    font-weight: 700;
                                }
                                &::before{
                                    border-color: #2cb88e;
                                }
                                &::after{
                                    background-color: #a8bbf8;
                                }
                            }
                        }
                    }
                    .formBox{
                        padding: 30px;
                        .formTitle{
                            font-size: 14px;
                            color: #333333;
                            font-weight: 700;
                        }
                        .formContent{
                            margin-top: 30px;
                            .formItem{
                                margin-bottom: 20px;
                                display: flex;
                                position: relative;
                                &::before{
                                    content: "*";
                                    color: red;
                                    position: absolute;
                                    left: 5px;
                                    top: 1px;
                                }
                                .el-radio{
                                    line-height: normal;
                                }
                                .el-textarea{
                                    flex: 1;
                                }
                                .uploadBox{
                                    /deep/.el-upload--picture-card{
                                        width: 100px;
                                        height: 100px;
                                        line-height: 100px;
                                    }
                                    /deep/.el-upload-list--picture-card .el-upload-list__item{
                                        width: 100px;
                                        height: 100px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
